<script setup lang="ts">
import { showToast } from 'vant';
function onClickLeft() {
    history.back()
}
import { ref } from 'vue';


const fileList = ref([
    // Uploader 根据文件后缀来判断是否为图片文件
    // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明

]);

console.log(123444, fileList);

const afterRead = (file:any) => {
    // 此时可以自行将文件上传至服务器
    console.log(65, file);
    localStorage.setItem('avatar', file.objectUrl)
};
const changeusername = ref('')
import { useUserStore } from '@/stores/user';

const user = useUserStore()
import { useRouter } from 'vue-router';
const router=useRouter()
function cancel(){
    //取消
    localStorage.removeItem('avatar')//移除头像baseURL
    fileList.value=[]//清空数组列表
    changeusername.value=''//用户名修改清空
}
function submit() {
    //提交修改
    //修改头像
    //修改用户名

    user.changeUserState({
        token: user.token,
        userid: user.userid,
        isLogin: true,
        userpsw: user.userpsw,
        usertel: user.usertel,
        username: changeusername.value
    })
    showToast('修改成功')
    router.push('/my')//跳转到我的页面
}
</script>
<template>
    <div>
        <van-nav-bar title="个人主页设置" left-text="返回" left-arrow @click-left="onClickLeft" />
        <!-- <van-uploader v-model="fileList" :deletable="false" :max-count="1" style="border-radius: 50%;"/> -->
        <div class="boxcenter">
            <!-- <van-uploader  /> -->
            <van-uploader v-model="fileList" reupload max-count="1" :after-read="afterRead" />
            <p style="text-align: center; user-select: none;margin-top: 20px">更换头像</p>
            <van-field style="margin-top: 20px" v-model="changeusername" name="用户名" label="用户名" placeholder="这里可以修改用户名"
                :rules="[{ required: true, message: '请填写用户名' }]" />
            <p style="margin-top: 20px">
                <van-button style="margin-right: 16px;" @click="cancel"> 取消</van-button>
                <van-button @click="submit">提交</van-button>
            </p>
        </div>
    </div>
</template>
<style lang="scss" scoped>

.van-popup {
    --van-toast-background:#000
}
.boxcenter {
    display: flex;
    flex-direction: column;
    align-items: center;

}
</style>